<template>
	<view style="margin: 53.4rpx auto;display: block;width: 500rpx;">
		<view class="yt_input">
			<view class="yt_input_before">
				<image class="yt_input_before_img" src="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-baf89db3-4d55-4b1f-a05e-c0a1170f8dce/a2b5627f-f6ee-48ad-a470-7a8f40d70acf.png"></image>
			</view>
			<input class="myinput" :value="value" :password="showpassword" @input="handleInput" :placeholder="placeholder" />
			<view class="yt_input_after" @click="isshow">
				<image class="yt_input_after_img" :src="after_img"></image>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props:['placeholder','value'],
		data(){
			return {
				showpassword:true,
				after_img:'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-baf89db3-4d55-4b1f-a05e-c0a1170f8dce/6bcff370-883c-427a-8c8f-3ab383233f53.png',
			}
		},
		mounted(){
			console.log(this.showpassword)
		},
		methods:{
			handleInput(e){
				this.$emit('input',e.detail.value)
			},
			isshow(){
				console.log(1)
				this.showpassword = !this.showpassword
				if(this.showpassword){
					this.after_img = 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-baf89db3-4d55-4b1f-a05e-c0a1170f8dce/6bcff370-883c-427a-8c8f-3ab383233f53.png'
				}else{
					this.after_img = 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-baf89db3-4d55-4b1f-a05e-c0a1170f8dce/37af5607-0ae1-409a-b1b7-058780dc2855.png'
				}
			}
		}
	}
</script>

<style lang="scss">
	.yt_input{
		display: inline-flex;
		border: 1rpx solid #00000000;
		background-color: #EBEBEBFF;
		border-radius: 26.7rpx;
		width: 500rpx;
		.yt_input_before{
			padding: 34.71rpx;
		}
		.yt_input_after{
			padding: 53.4rpx 34.71rpx 0 34.71rpx;
		}
		.yt_input_before_img{
			width: 50.73rpx;
			height: 50.07rpx;
			line-height: 80.1rpx;
		}
		.yt_input_after_img{
			width: 58.74rpx;
			height: 29.37rpx;
		}
		.myinput{
			margin: 42.72rpx 0 42.72rpx 0;
			width: 100%;
		}
	}
	
</style>